<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>About Positioning Properties</TITLE>
     <link rel="stylesheet" type="text/css" href="../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<h1 align="center"><span class="pagetitle">About Positioning Properties</span><br>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../misc/email.htm">Brian Wilson</a> =</font></h1>

<div align="center">
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../index.html">Main Index</a> |
    <a href="../propindex/font.htm">Property Index</a> |
    <a href="../supportkey/syntax.htm">CSS Support History</a> |
    <a href="../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>
</div>
<br><br>

<dl>
<dt><big><b class="mainheading">Positioning Properties</b></big>
    <dd><a href="classify/position.htm">position</a> | 
        <a href="position/top.htm">top</a> |
        <a href="position/right.htm">right</a> |
        <a href="position/bottom.htm">bottom</a> |
        <a href="position/left.htm">left</a> | 
        <a href="position/vertalign.htm">vertical-align</a><br>
        <a href="position/overflow.htm">overflow</a> |
        <a href="position/overflowx.htm">overflow-x</a> |
        <a href="position/overflowy.htm">overflow-y</a> |
        <a href="position/clip.htm">clip</a> |
        <a href="position/zindex.htm">z-index</a>
</dl>

<br>
<dl>
<dt><big><b class="mainheading">What Do They Do?</b></big>
    <dd>When an element is called 'positioned' in the visual formatting model, it
        may or may not be rendered immediately after the previous element in the
        document tree. An element that is positioned ('position' property ) has its
        rendering offset from the canvas origin or from its normal flow position
        via the 'top', 'right', 'bottom', and 'left' properties.
        <br><br>

        In addition to determining position offsets, positioning properties also
        specify the the visible display area of an element's rendering box ('clip')
        and directives indicating what should happen when an element's content
        falls outside the rendering box ('overflow'.)
        <br><br>

        But... positioning in CSS is not just about rendering in 2-dimensions. It also
        allows for placement and overlap of elements in an imaginary third dimension
        perpendicular to the screen ('z-axis'.)
        <br><br>

        The final property included in this category, 'vertical-align', is not involved with
        "CSS positioning" per se, but it does involve vertical positioning of content
        within a rendered line box.
        <br><br>

        Many of these properties were first introduced prior to CSS2 in the W3C Working
        draft "Positioning HTML Elements with Cascading Style Sheets"
        (<a href="http://www.w3.org/TR/WD-positioning">http://www.w3.org/TR/WD-positioning</a>,
        Robert Stevahn, Scott Furman, Scott Isaacs, et.al., 19 August, 1997)
</dl>

<dl>
<dt><big><b class="mainheading">Related Sites</b></big>
<dt><b class="subheading">Official Reference: CSS Level 1, Section 5.4.4</b>
    <dd>5.4.4: '<a href="http://www.w3.org/TR/REC-CSS1#vertical-align">vertical-align</a>'
<dt><b class="subheading">Official Reference: CSS Level 2, Sections 9, 10 and 11</b>
    <dd>9.3.1: '<a href="http://www.w3.org/TR/REC-CSS2/visuren.html#choose-position">position</a>'<br>
        9.3.2: '<a href="http://www.w3.org/TR/REC-CSS2/visuren.html#position-props">top</a>'<br>
        9.3.2: '<a href="http://www.w3.org/TR/REC-CSS2/visuren.html#position-props">right</a>'<br>
        9.3.2: '<a href="http://www.w3.org/TR/REC-CSS2/visuren.html#position-props">bottom</a>'<br>
        9.3.2: '<a href="http://www.w3.org/TR/REC-CSS2/visuren.html#position-props">left</a>'<br>
        9.9.1: '<a href="http://www.w3.org/TR/REC-CSS2/visuren.html#z-index">z-index</a>'<br>
        10.8: '<a href="http://www.w3.org/TR/REC-CSS2/visudet.html#line-height">vertical-align</a>'<br>
        11.1.1: '<a href="http://www.w3.org/TR/REC-CSS2/visufx.html#overflow">overflow</a>'<br>
        11.1.2: '<a href="http://www.w3.org/TR/REC-CSS2/visufx.html#clipping">clip</a>'
<dt><b class="subheading">Browser Reference: Microsoft MSDN</b>
    <dd>'<a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/overflowX.asp#overflowX">overflow-x</a>'<br>
        '<a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/overflowY.asp#overflowY">overflow-y</a>'<br>
</dl>

<br><br>
<a href="../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>